<template>
  <MenuButton @click-menu-button="toggleFullScreen">
    <el-icon><FullScreen /></el-icon>
  </MenuButton>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted } from "vue";
import MenuButton from "../MenuButton/index.vue";
import { useCommonStore } from "@/stores/common";

const commonStore = useCommonStore();

defineOptions({
  name: "FullScreenButton",
});

// 监听全屏状态变化
const handleFullScreenChange = () => {
  commonStore.isFullScreen =
    !!document.fullscreenElement ||
    !!(document as any).webkitFullscreenElement ||
    !!(document as any).mozFullScreenElement ||
    !!(document as any).msFullscreenElement;
};

// 切换全屏状态
const toggleFullScreen = () => {
  if (!commonStore.isFullScreen) {
    // 进入全屏
    const element = document.documentElement;
    if (element.requestFullscreen) {
      element.requestFullscreen();
    } else if ((element as any).webkitRequestFullscreen) {
      (element as any).webkitRequestFullscreen();
    } else if ((element as any).mozRequestFullScreen) {
      (element as any).mozRequestFullScreen();
    } else if ((element as any).msRequestFullscreen) {
      (element as any).msRequestFullscreen();
    } else {
      console.log("浏览器不支持全屏");
    }
  } else {
    // 退出全屏
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if ((document as any).webkitExitFullscreen) {
      (document as any).webkitExitFullscreen();
    } else if ((document as any).mozCancelFullScreen) {
      (document as any).mozCancelFullScreen();
    } else if ((document as any).msExitFullscreen) {
      (document as any).msExitFullscreen();
    }
  }
};

// 监听全屏事件
onMounted(() => {
  document.addEventListener("fullscreenchange", handleFullScreenChange);
  document.addEventListener("webkitfullscreenchange", handleFullScreenChange);
  document.addEventListener("mozfullscreenchange", handleFullScreenChange);
  document.addEventListener("MSFullscreenChange", handleFullScreenChange);
});

// 移除事件监听
onUnmounted(() => {
  document.removeEventListener("fullscreenchange", handleFullScreenChange);
  document.removeEventListener(
    "webkitfullscreenchange",
    handleFullScreenChange
  );
  document.removeEventListener("mozfullscreenchange", handleFullScreenChange);
  document.removeEventListener("MSFullscreenChange", handleFullScreenChange);
});
</script>

<style scoped></style>
